<% layout('/layouts/default.html', {title: '', bodyClass: ''}){ %>
<!-- <link rel="stylesheet" href="${ctxStatic}/modules/sys/sysDesktop.css?${_version}"> -->
<div class="content pb0">
	<div class="row">
        <section class="col-md-12 ui-sortable">
          <!-- Chat box -->
          <div class="nav-tabs-custom">
            <!-- Tabs within a box -->
            <br/>
            <div class="row">
              <div class="col-xs-6">
                <div class="form-group">
                  <div class="col-sm-8">
                    <#form:select id="theoryId" items="${theoryList}" itemLabel="objName"
                    itemValue="id" class="form-control required" onchange="selectTheory()"/>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-content no-padding">
              <div class="chart tab-pane active" id="chart-1">
            	<div id="myChart2" style="height:300px;width:100%"></div>

              </div>
              <div class="chart tab-pane" id="chart-2">
              	<div id="myChart3" style="height:300px;width:100%"></div><script>
	              	$(function(){
						myChart3 = echarts.init(document.getElementById('myChart3'), 'light');
						myChart3.setOption({
						    tooltip : {
						        trigger: 'axis',
						        axisPointer: {
						            type: 'cross',
						            label: {
						                backgroundColor: '#6a7985'
						            }
						        }
						    },
						    legend: {
						        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
						    },
						    toolbox: {
						        feature: {
						            saveAsImage: {}
						        }
						    },
						    grid: {
						        left: '3%',
						        right: '4%',
						        bottom: '3%',
						        containLabel: true
						    },
						    xAxis : [
						        {
						            type : 'category',
						            boundaryGap : false,
						            data : ['周一','周二','周三','周四','周五','周六','周日']
						        }
						    ],
						    yAxis : [
						        {
						            type : 'value'
						        }
						    ],
						    series : [
						        {
						            name:'邮件营销',
						            type:'line',
						            stack: '总量',
						            areaStyle: {},
						            data:[120, 132, 101, 134, 90, 230, 210]
						        },
						        {
						            name:'联盟广告',
						            type:'line',
						            stack: '总量',
						            areaStyle: {},
						            data:[220, 182, 191, 234, 290, 330, 310]
						        },
						        {
						            name:'视频广告',
						            type:'line',
						            stack: '总量',
						            areaStyle: {},
						            data:[150, 232, 201, 154, 190, 330, 410]
						        },
						        {
						            name:'直接访问',
						            type:'line',
						            stack: '总量',
						            areaStyle: {normal: {}},
						            data:[320, 332, 301, 334, 390, 330, 320]
						        },
						        {
						            name:'搜索引擎',
						            type:'line',
						            stack: '总量',
						            label: {
						                normal: {
						                    show: true,
						                    position: 'top'
						                }
						            },
						            areaStyle: {normal: {}},
						            data:[820, 932, 901, 934, 1290, 1330, 1320]
						        }
						    ]
						});
					});
              	</script>
              </div>
            </div>
          </div>

        </section>

    </div>
</div>

<% } %>
<script src="${ctxStatic}/jquery/jquery-ui-sortable-1.12.1.min.js"></script>
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script>
  $(function(){
    myChart2 = echarts.init(document.getElementById('myChart2'), 'light');
    $.ajax({
      type:"get",
      url:"${ctx}/zx/echarts/createEcharts/"+$("#theoryId").val(),
      dataType:'json',
      error : function() {
        alert('请求失败！请刷新页面重试！ ');
      },
      success : function(data) {
        myChart2.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          series: [
            {
              name:'考试成绩分布',
              type:'pie',
              radius: ['15%', '60%'],
              roseType : 'radius',
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '10',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data:data
            }
          ]
        });
      }
    });
  });
$(function(){
	$(window).resize(function(){
		 myChart2.resize(); myChart3.resize();
	}).resize();
	$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
		$(window).resize();
	});
	$('.ui-sortable').sortable({
		connectWith : '.ui-sortable',
		handle      : '.box-header, .nav-tabs',
		placeholder : 'sort-highlight',
		forcePlaceholderSize: true,
		zIndex : 999999
	}).find('.box-header, .nav-tabs').css('cursor', 'move');

});


  function selectTheory() {
    var theoryId = $('#theoryId').val();
    $.ajax({
      type:"get",
      url:"${ctx}/zx/echarts/createEcharts/"+theoryId,
      dataType:'json',
      error : function() {
        alert('请求失败！请刷新页面重试！ ');
      },
      success : function(data) {
        myChart2.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          series: [
            {
              name:'考试成绩分布',
              type:'pie',
              radius: ['15%', '60%'],
              roseType : 'radius',
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '10',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data:data
            }
          ]
        });
      }
    });
  }



</script>